<template>
  <div class="chatwoot-page">
    <div class="patient-container">
      <div>
        <div
          class="patient-item" :class = "{active:currentPatientId == item.id}"
          v-for="item in patientList"
          :key="item.id"
          @click="patientClick(item)"
        >
          {{ item.fullName }}
        </div>
      </div>
    </div>
    <div class="appointment-container" v-loading='loading'>
      <div class="history-container" >
        <div v-if="appointmentList.length > 0">
          <div v-for="item in appointmentList" :key="item.group">
            <div
              class="group iconfont"
              :class="{ closed: item.close }"
              @click="groupClick(item)"
            >
              {{ item.group }}
            </div>
            <div>
              <div v-if="!item.close">
                <div
                  v-for="appointment in item.list"
                  :key="appointment.id"
                  @click="itemClick(appointment)"
                >
                  <div class="appointment">
                    <div class="time-container">
                      <div class="time-icon-container">
                        <i class="iconfont icon-appointment"></i>
                      </div>
                      <div class="appointment-time">
                        {{ getTime(appointment) }}
                      </div>
                    </div>

                    <div class="p-row patient" style="margin-top: 20px">
                      <i class="iconfont icon-user"></i>
                      <div class="context">{{ appointment.patientName }}</div>
                    </div>

                    <div class="p-row purpose" style="margin-top: 15px">
                      <i class="iconfont icon-guard"></i>
                      <div class="context" style="line-height: 20px">
                        {{ appointment.purpose }}
                      </div>
                    </div>

                    <div class="doctor-container">
                      <!-- <img :src="`/avatar/${appointment.doctorAvatar || 'default'}.png`" alt="" /> -->
                      <img
                        v-if="appointment.doctorAvatar"
                        :src="appointment.doctorAvatar"
                        alt=""
                      />
                      <img v-else src="/avatar/default.png" alt="" />
                      <span>{{ appointment.doctorName }}</span>
                    </div>

                    <div
                      class="status-container"
                      :style="{ color: getStatusColor(getStatus(appointment)) }"
                    >
                      {{ getStatus(appointment) }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          v-else-if="!loading && appointmentList.length == 0"
          style="padding: 0 20px"
        >
          <div>
            <img src="@/assets/images/no.png" style="width: 100%" alt="" />
          </div>

          <div
            style="
              text-align: center;
              margin-top: 40px;
              color: #000c14;
              font-weight: 500;
            "
          >
            Do not have any appointments!
          </div>

           
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { patientListRequest, appointmentListRequest } from "@/api/http";
import { useRoute } from "vue-router";
import moment from "moment-timezone";

const route = useRoute();
let phone = null;
const patientList = ref([]);
const appointmentList = ref([]);
const loading = ref(false);
const currentPatientId = ref();
onMounted(() => {
  let token = route.query.token;
  if (!token) {
    return;
  }
  localStorage.setItem("chatwoot-token", token);

  window.addEventListener("message", function (event) {
    // console.log("event", JSON.parse(event.data))

    let eventData = JSON.parse(event.data);
    console.log(eventData.data);
    phone = eventData.data.contact.phone_number;
    console.log("phone", phone);
    getPatient();
  });
});

function getPatient() {
  let params = {
    phone: phone,
  };

  patientListRequest(params).then((res) => {
    patientList.value = res;
    if (res.length > 0) {
      currentPatientId.value = patientList.value[0].id;

      getAppointmentList(patientList.value[0].id);
    }
  });
}
function getTime(appointment) {
  let time = moment(appointment.date + " " + appointment.time).format(
    "DD MMM, hh:mma"
  );

  return time;
}
function getStatusColor(status) {
  //   if (status == "Missed" || status == "Cancelled" || status == "Rescheduled") {
  //     return "red";
  //   }
  if (status == "Attended" || status == "Confirmed") {
    return "#16B961";
  } else if (status == "Checkout" || status == "CheckIn") {
    return "#19B4D2";
  } else if (status == "Scheduled") {
    return "#192BD2";
  } else if (
    status == "Missed" ||
    status == "Cancelled" ||
    status == "Rescheduled"
  ) {
    return "#FF5B5B";
  }
}
function getStatus(appointment) {
  var statusMap = {
    1000: "Attended",
    1001: "Cancelled",
    1002: "CheckIn",
    1003: "Checkout",
    1004: "Scheduled",
    1005: "Missed",
    1006: "Rescheduled",
  };
  if (appointment.confirmed == 1 && appointment.status == 1004) {
    return "Confirmed";
  } else {
    return statusMap[appointment.status];
  }
}
function groupClick(group) {
    group.close = !group.close
}
function patientClick(patient) {
  currentPatientId.value = patient.id;
  getAppointmentList(patient.id);
}
function getAppointmentList(id) {
  loading.value = true;
  appointmentListRequest({ patientId: id })
    .then((res) => {
      const arr = [];
      loading.value = false;
      if (res.upcoming.length > 0) {
        arr.push({
          group: "Upcoming",
          list: res.upcoming,
          close: false,
        });
      }
      for (let i = 0; i < res.history.length; i++) {
        let temp = res.history[i];
        let key = Object.keys(temp)[0];
        arr.push({
          group: key,
          list: temp[key],
          close: false,
        });
      }
      appointmentList.value = arr;
    })
    .catch(() => {
      loading.value = false;
    });
}
</script>

<style lang="scss" scoped>
.chatwoot-page {
  // display: flex;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: row;
  overflow: hidden;

  .patient-container {
    min-width: 350px;
    flex-basis: 350px;
    height: 100%;
    overflow: auto;
    .patient-item.active{
        background:#c2e1ff;
        
    }
    .patient-item {
      box-shadow: 2px 2px 8px rgba(72, 101, 129, 0.1);
      height: 48px;
      text-align: center;
      line-height: 48px;
      color: #000c14;
      border-radius: 4px;
      margin-bottom: 20px;
      background: #ffffff;
      cursor: pointer;
    }
  }

  .appointment-container {
    flex: 1;
    margin-left: 20px;
    height: 100%;
    overflow: auto;

    .history-container {
      padding: 20px;
    }

    .group {
      background-color: rgba($color: #2680c2, $alpha: 0.08);
      height: 48px;
      line-height: 48px;
      position: relative;
      padding: 0 10px;
      border-radius: 8px;
      font-weight: 500;
      font-size: 18px;
      color: var(--theme-color);
      cursor: pointer;
      margin-bottom: 10px;
    }

    .group::after {
      display: block;
      content: "\e66b";
      position: absolute;
      right: 10px;
      top: 0;
    }

    .group.closed::after {
      transform: rotateZ(90deg);
    }

    .status-container {
      position: absolute;
      right: 10px;
      top: 20px;
      font-size: 16px;
      line-height: 24px;

      color: rgba(25, 180, 210, 1);
    }

    .appointment {
      background: #ffffff;
      box-shadow: 2px 2px 8px rgba(72, 101, 129, 0.1);
      border-radius: 4px;
      border-left: 4px solid #19b4d2;
      padding-top: 14px;
      margin-bottom: 20px;
      position: relative;
      cursor: pointer;
      .time-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-left: 12px;
      }

      .appointment-time {
        font-size: 18px;
        font-weight: bold;
        line-height: 40px;
      }

      .time-icon-container {
        width: 32px;
        margin-right: 10px;
        height: 32px;
        background-color: #2680c2;
        border-radius: 16px;
        justify-content: center;
        align-items: center;
        display: flex;

        i {
          color: #ffffff;
        }
      }

      .doctor-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 15px 20px;
        font-size: 16px;
        color: rgba(0, 12, 20, 1);

        img {
          width: 32px;
          height: 32px;
          border-radius: 16px;
          margin-right: 20px;
        }
      }

      .patient {
      }

      .p-row.purpose {
        padding-bottom: 16px;
        border-bottom: 1px solid #dbe4ed;
      }

      .p-row {
        display: flex;
        flex-direction: row;

        padding: 0 20px;
        color: rgba(72, 101, 129, 0.7);

        .context {
          margin-left: 10px;
          color: rgba(0, 12, 20, 1);
          font-size: 16px;
        }
      }
    }
  }
}
</style>
